<template>
  <div>
    <div class="nav">
      <div class="nav1">
        <div class="left">
          <img src="../assets/img/bannerLogo.jpg">
        </div>
        <div class="right">
          <h2>粥品香坊（回龙观）</h2>
          <p>
            <span>
              蜂鸟专送
            </span>
            <span>
              38分钟送达/
            </span>
            <span>
              配送费¥6
            </span>
          </p>
          <p>
            <span class="gong">减：</span>
            <span>
              在线支付满28减5 满50减10
            </span>

          </p>
        </div>

      </div>
      <div class="xia">
        <span>公告</span>
        粥品香坊其烹饪粥料的秘方源于中国千年古法，在融和现代制作工艺，由世界烹饪大师屈浩先生领衔研发。坚守纯天然、0添加的良心品质深得消费者青睐，发展至今成为粥类的引领品牌。是2008年奥运会和2013年园博会指定餐饮服务商。
      </div>
    </div>
    <div class="box">
      <ul>
        <li>商品</li>
        <li>评价</li>
        <li>商家</li>
      </ul>
    </div>
    <div class="nei">
      <ul>
        <li @click="click(i)" v-for="(v,i) in list" :key="i">{{v}}</li>
      </ul>
      <swiper :options="swiperOption" ref="mySwiper" class="swp">
        <!-- slides -->
        <swiper-slide>

          <div class="box">
            <div class="ox">
              <p class="p1">
                <span class="cu">热销</span>大家喜欢吃，才叫真好吃。</p>
              <div class="box2" v-for="(v,i) in list1" :key="i">
                <div class="left">
                  <img src="https://fuss10.elemecdn.com/a/68/95feef0289fd278cc2c3bad9622f6jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/" alt="">
                </div>

                <div class="chao">
                  <h2>
                    {{v.name}}
                  </h2>
                  <p>{{v.description}}</p>
                  <p>
                    <span>月售{{v.yueshou}}份</span>
                    <span>好评率{{v.hao}}%</span>
                  </p>
                  <p class="qian">￥18
                    <span class="jia">+</span>
                  </p>
                </div>
              </div>

            </div>
          </div>

        </swiper-slide>
        <swiper-slide>
          <div class="box">
            <div class="ox">
              <p class="p1">
                <span class="cu">热销</span>大家喜欢吃，才叫真好吃。</p>
              <div class="box2" v-for="(v,i) in list1" :key="i">
                <div class="left">
                  <img src="https://fuss10.elemecdn.com/a/68/95feef0289fd278cc2c3bad9622f6jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/" alt="">
                </div>

                <div class="chao">
                  <h2>
                    {{v.name}}
                  </h2>
                  <p>{{v.description}}</p>
                  <p>
                    <span>月售{{v.yueshou}}份</span>
                    <span>好评率{{v.hao}}%</span>
                  </p>
                  <p class="qian">￥18
                    <span class="jia">+</span>
                  </p>
                </div>
              </div>

            </div>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="box">
            <div class="ox">
              <p class="p1">
                <span class="cu">热销</span>大家喜欢吃，才叫真好吃。</p>
              <div class="box2" v-for="(v,i) in list1" :key="i">
                <div class="left">
                  <img src="https://fuss10.elemecdn.com/a/68/95feef0289fd278cc2c3bad9622f6jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/" alt="">
                </div>

                <div class="chao">
                  <h2>
                    {{v.name}}
                  </h2>
                  <p>{{v.description}}</p>
                  <p>
                    <span>月售{{v.yueshou}}份</span>
                    <span>好评率{{v.hao}}%</span>
                  </p>
                  <p class="qian">￥18
                    <span class="jia">+</span>
                  </p>
                </div>
              </div>

            </div>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="box">
            <div class="ox">
              <p class="p1">
                <span class="cu">热销</span>大家喜欢吃，才叫真好吃。</p>
              <div class="box2" v-for="(v,i) in list1" :key="i">
                <div class="left">
                  <img src="https://fuss10.elemecdn.com/a/68/95feef0289fd278cc2c3bad9622f6jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/" alt="">
                </div>

                <div class="chao">
                  <h2>
                    {{v.name}}
                  </h2>
                  <p>{{v.description}}</p>
                  <p>
                    <span>月售{{v.yueshou}}份</span>
                    <span>好评率{{v.hao}}%</span>
                  </p>
                  <p class="qian">￥18
                    <span class="jia">+</span>
                  </p>
                </div>
              </div>

            </div>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="box">
            <div class="ox">
              <p class="p1">
                <span class="cu">热销</span>大家喜欢吃，才叫真好吃。</p>
              <div class="box2" v-for="(v,i) in list1" :key="i">
                <div class="left">
                  <img src="https://fuss10.elemecdn.com/a/68/95feef0289fd278cc2c3bad9622f6jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/" alt="">
                </div>

                <div class="chao">
                  <h2>
                    {{v.name}}
                  </h2>
                  <p>{{v.description}}</p>
                  <p>
                    <span>月售{{v.yueshou}}份</span>
                    <span>好评率{{v.hao}}%</span>
                  </p>
                  <p class="qian">￥18
                    <span class="jia">+</span>
                  </p>
                </div>
              </div>

            </div>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="box">
            <div class="ox">
              <p class="p1">
                <span class="cu">热销</span>大家喜欢吃，才叫真好吃。</p>
              <div class="box2" v-for="(v,i) in list1" :key="i">
                <div class="left">
                  <img src="https://fuss10.elemecdn.com/a/68/95feef0289fd278cc2c3bad9622f6jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/" alt="">
                </div>

                <div class="chao">
                  <h2>
                    {{v.name}}
                  </h2>
                  <p>{{v.description}}</p>
                  <p>
                    <span>月售{{v.yueshou}}份</span>
                    <span>好评率{{v.hao}}%</span>
                  </p>
                  <p class="qian">￥18
                    <span class="jia">+</span>
                  </p>
                </div>
              </div>

            </div>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="box">
            <div class="ox">
              <p class="p1">
                <span class="cu">热销</span>大家喜欢吃，才叫真好吃。</p>
              <div class="box2" v-for="(v,i) in list1" :key="i">
                <div class="left">
                  <img src="https://fuss10.elemecdn.com/a/68/95feef0289fd278cc2c3bad9622f6jpeg.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/" alt="">
                </div>

                <div class="chao">
                  <h2>
                    {{v.name}}
                  </h2>
                  <p>{{v.description}}</p>
                  <p>
                    <span>月售{{v.yueshou}}份</span>
                    <span>好评率{{v.hao}}%</span>
                  </p>
                  <p class="qian">￥18
                    <span class="jia">+</span>
                  </p>
                </div>
              </div>

            </div>
          </div>
        </swiper-slide>
        <!-- Optional controls -->
        <!-- <div class="swiper-pagination" slot="pagination"></div>//
                <div class="swiper-button-prev" slot="button-prev"></div>
                <div class="swiper-button-next" slot="button-next"></div>
                <div class="swiper-scrollbar" slot="scrollbar"></div> -->
      </swiper>
    </div>
    <footer class="ftr">
      <div class="ftr-top">
        满50减12
      </div>
      <div class="ftr-wei">
        <div class="wei-left">
          <div class="wei-he">
            <div class="hyu">
              <p class="iconfont icon-gouwuche"></p>
            </div>
          </div>
          <div class="wei-tyy">
            <p>￥0</p>
            <span>配送费：￥5</span>
          </div>
        </div>
        <div class="wei-right">
          <p>￥40起送</p>
        </div>
      </div>
    </footer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        "热销榜",
        "单人精彩套餐",
        "冰爽饮品限时特惠",
        "精选热菜",
        "爽口凉菜",
        "精选套餐",
        "果拼果汁",
        "小吃主食",
        "特色粥品"
      ],
      list1: [
        {
          name: "皮蛋瘦肉粥",
          description: "咸粥",
          yueshou: "200",
          hao: "100"
        },
        {
          name: "皮蛋瘦肉粥",
          description: "咸粥",
          yueshou: "200",
          hao: "100"
        },
        {
          name: "皮蛋瘦肉粥",
          description: "咸粥",
          yueshou: "200",
          hao: "100"
        },
        {
          name: "皮蛋瘦肉粥",
          description: "咸粥",
          yueshou: "200",
          hao: "100"
        },
        {
          name: "皮蛋瘦肉粥",
          description: "咸粥",
          yueshou: "200",
          hao: "100"
        },
        {
          name: "皮蛋瘦肉粥",
          description: "咸粥",
          yueshou: "200",
          hao: "100"
        }
      ],

      swiperOption: {
        direction: "vertical",
        loop: true,
        autoplay: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
      }
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  methods: {
    click(e) {
      var lis = document.querySelectorAll("li");
      console.log(lis);
      for (var i = 0; i < lis.length; i++) {
        lis[i].className = "";
      }
      this.swiper.slideTo(e, 1000, false);
      lis[e].className = "li";
    }
  }
};
</script>
<style lang="less" scoped>
.px2rem(@name, @px) {
  @{name}: @px / 75 * 1rem;
}
.nav {
  width: 100%;
  display: flex;
  align-items: center;
  background: #cccccc;
  flex-wrap: wrap;
  .xia {
    .px2rem(height,40);
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    .px2rem(font-size,20);
    span {
      width: 20%;
      height: 100%;
      background: red;
      .px2rem(margin-left,25);
    }
  }
}
.nav1 {
  .px2rem(height,200);
  width: 100%;
  display: flex;
  background: #cccccc;
  .left {
    width: 30%;
    .px2rem(height,180);
    img {
      width: 65%;
      padding: 10% 15%;
    }
  }
  .right {
    width: 70%;
    .px2rem(height,180);
    margin: 3% 0%;
    h2 {
      .px2rem(height,40);
      width: 100%;
      .px2rem(font-size,36);
      font-weight: bolder;
    }
    p {
      width: 100%;
      .px2rem(height,30);
      .px2rem(margin-top,20);
      .px2rem(font-size,20);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      span {
        width: 30%;
        .px2rem(height,30);
        .px2rem(margin-left,2%);
      }
      .gong {
        color: red;
      }
    }
  }
}
.box {
  .px2rem(height,80);
  width: 100%;
  border-bottom: 1px solid #cccccc;
  box-sizing: border-box;
  ul {
    display: flex;
    width: 100%;
    .px2rem(height,80);
    li {
      width: 33.3%;
      .px2rem(height,80);
      border-right: 1px solid #cccccc;
      box-sizing: border-box;
      text-align: center;
      .px2rem(line-height,80);
      .px2rem(font-size,28);
    }
    li:last-child {
      border: none;
    }
    li:hover {
      color: red;
    }
  }
}
.nei {
  width: 100%;
  .px2rem(height,900);
  display: flex;
  background: #ccc;
  .px2rem(margin-bottom,200);
  ul {
    width: 20%;
    height: 100%;
    overflow: auto;
    border-right: 1px solid #cccccc;
    li {
      .px2rem(height,108);
      width: 100%;
      .px2rem(line-height,108);
      text-align: center;
      .px2rem(font-size,28);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: black;
      border-right: 1px solid black;
      border-bottom: 1px solid black;
      box-sizing: border-box;
    }
    li:hover {
      background: #ffffff;
    }
  }
  .swp {
    width: 80%;
    height: 100%;
  }
  .box {
    width: 100%;
    .px2rem(height,900);
    overflow: auto;
    .ox {
      width: 100%;
      .p1 {
        width: 100%;
        .px2rem(height,30);
        .px2rem(line-height,30);
        border-bottom: 1px #cccccc dashed;
        .cu {
          font-weight: bolder;
          .px2rem(padding-left,  20);
          .px2rem(padding-right,  10);
        }
      }
      .box2 {
        width: 100%;
        display: flex;
        .left {
          width: 30%;
          img {
            // .px2rem(width,120);
            // .px2rem(height,120);
            width: 90%;
            .px2rem(padding,25);
          }
        }
        .chao {
          // .px2rem(padding,5%);
          width: 100%;
          .px2rem(line-height,40);
          .px2rem(margin-left,20);
          h2 {
            //  .px2rem(padding-top,20%);
            padding-top: 4.2%;
            font-weight: bolder;
            .px2rem(font-size,24);
          }
          p {
            .px2rem(height,30);
            .px2rem(line-height,30);
            // white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            // .px2rem(padding-top,2%);
          }
          .qian {
            color: red;
            font-weight: bolder;
            .px2rem(font-size,30);
            display: flex;
            justify-content: space-between;
            span {
              .px2rem(padding-right,20);
              color: black;
            }
          }
        }
      }
    }
  }
}

.ftr {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 300;
  .ftr-top {
    width: 100%;
    .px2rem(height,60);
    background: #ffcc99;
    display: flex;
    justify-content: center;
    align-items: center;
    .px2rem(font-size,32);
  }
  .ftr-wei {
    width: 100%;
    display: flex;
    .wei-left {
      width: 70%;
      .px2rem(height,140);
      background: #000;
      .wei-he {
        width: 35%;
        .px2rem(height,140);
        justify-content: center;
        display: flex;
        position: relative;
        top: 0;
        .hyu {
          .px2rem(width,120);
          .px2rem(height,120);
          border: 8px solid #161823;
          border-radius: 50%;
          background: #000000;
          justify-content: center;
          align-items: center;
          display: flex;
          position: absolute;
          top: -21px;
          p {
            .px2rem(font-size,80);
            color: #666666;
          }
        }
      }
      .wei-tyy {
        width: 65%;
        .px2rem(height,140);
        display: flex;
        flex-direction: column;
        position: relative;
        .px2rem(top,-140);
        left: 35%;
        p {
          .px2rem(font-size,42);
          font-weight: bold;
          color: #fff;
          .px2rem(padding-top,35);
        }
        span {
          .px2rem(font-size,32);
          color: #fff;
          .px2rem(padding-top,12);
        }
      }
    }
    .wei-right {
      width: 30%;
      .px2rem(height,140);
      display: flex;
      justify-content: center;
      align-items: center;
      background: #161823;
      p {
        .px2rem(font-size,42);
        font-weight: bold;
        color: #fff;
      }
    }
  }
}
</style>
